import React, { useState } from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { UserOutlined,LockOutlined } from '@ant-design/icons';
import '../assets/styles/login.css';
import { loginApi } from '../api/login';

export default function Login() {
    const [loading, setLoading] = useState(false)
    const navigate = useNavigate()

    const onFinish = (values) => {
        setLoading(true)
        loginApi(values).then(res => {
            setLoading(false)
            // console.log('res', res);
            const { config, exipreTime, permissions, roles, token, user } = res.data;
            localStorage.config = JSON.stringify(config)
            localStorage.exipreTime = exipreTime,
            localStorage.permissions = JSON.stringify(permissions);
            localStorage.roles = JSON.stringify(roles);
            localStorage.token = token;
            localStorage.user = JSON.stringify(user)
            message.success(res.message)
            navigate('/nav')
        }).catch(err => {
            message.error("用户名或密码错误")
            setLoading(false)
            console.log('err', err);
        })
    }
    return (
        <div className='box'>
            <div className='box_content'>
                <div className='title_box'>
                    <div className='title_img'><img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="..." /></div>
                    <div className='title'>赤兔养车</div>
                </div>
                <div>
                    <Form
                        name="basic"
                        labelCol={{
                            // offset: 6,
                            // span: 8,
                        }}
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        // onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            // label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名!',
                                },
                            ]}
                        >
                            <Input prefix={<UserOutlined />} />
                        </Form.Item>

                        <Form.Item
                            // label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码!',
                                },
                            ]}
                        >
                            <Input.Password prefix={<LockOutlined />} />
                        </Form.Item>


                        <Form.Item
                            wrapperCol={{
                                offset: 4,
                                span: 16,
                            }}
                        >
                            <Button loading={loading} type="primary" htmlType="submit" block="true">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                {/* 注册=商家 */}
                <div className='text'>
                    <a href="#">注册用户</a>
                    <a href="#">商家入驻</a>
                </div>
            </div>
        </div>
    )
}

